<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('普通表格')}`">{{ $t('普通表格') }}</t>
            <li>当给定<span class="s-code">sib-table</span>固定高度时（使用样式控制或者传入<span class="d-code">height</span>均可），组件内部将自动调整布局，永远保持表头和分页器固定</li>
            <li>
                <span class="d-code">table-column</span>用于配置表格的列，其配置参数很丰富。可以根据
                <span class="s-code">type</span>来配置不同形式的单元格内容，且每种类型对应一些额外配置参数，
                详细的信息你可以查看相关示例介绍。现在我们举例一些通用配置，例如:
                <span class="s-code">label</span>、
                <span class="s-code">code</span>、
                <span class="s-code">width</span>、
                <span class="s-code">formatter</span>等等，更多通用配置和额外配置请查阅下方【Attributes】内的介绍。
            </li>
        </template>
        <div style="margin-bottom: 10px;">
            <el-button @click="handleAdd">新增行</el-button>
            <el-button @click="handleDelete">删除行</el-button>
            <el-button @click="handleAutoLine">切换【照片】列的文本展示模式</el-button>
        </div>
        <sib-table :height="400" :table-column="tableColumn" :table-data="tableData"></sib-table>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const tableData = ref(Array(10).fill().map((_, i) => ({
            id: i + 1,
            name: `张三${i + 1}号`,
            sex: i % 2,
            height: 165 + i,
            status: i % 2,
            age: i + 10,
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        })));
        const tableColumn = ref([
            {
                // 非必传，当前列的表头名称
                label: '姓名',
                // 必传，当前列每一行数据展示值对应的code
                code: 'name',
                // 列的宽度，未配置则默认自适应
                width: 100,
                // 配置了 filters 将开启列筛选功能
                filters: [
                    { text: '想看张三1号', value: 'zs1' },
                    { text: '想看张三2号', value: 'zs2' },
                ],
                // 自定义筛选方法 filterMethod
                filterMethod(value, row, column) {
                    if (value === 'zs1') return row[column.property] === '张三1号';
                    if (value === 'zs2') return row[column.property] === '张三2号';
                    return true;
                },
            },
            {
                label: '性别',
                code: 'sex',
                // 非必传，该列的值支持使用 formatter 方法进行自定义；参数为: (row, config)
                formatter: (row) => ({ 1: '男', 0: '女' })[row.sex],
            },
            {
                label: '年龄',
                code: 'age',
                // 对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件;
                // 如果设置为 true，并且配置了 requestConfig，则自动启用调用接口的方式进行排序；
                // 如果设置为 true，但未配置 requestConfig，则使用前端静态排序的方式；
                sortable: true,
            },
            {
                label: '照片',
                code: 'avatar',
                // 当内容过长被隐藏时显示 tooltip； 组件内默认值: true
                showOverflowTooltip: true,
            },
            {
                label: '身高',
                code: 'height',
            },
            {
                label: '状态',
                code: 'status',
                // 格式化内容展示
                formatter: (row) => ({ 1: '启用', 0: '禁用' })[row.status],
                // 配置了 filters 将开启列筛选功能
                // 如果不配置 filterMethod，组件内会默认根据数据行内的 status 的值跟 filters 定义的 value 进行匹配过滤
                // 即 row.status === filters[n].value
                filters: [
                    { text: '启用', value: 1 },
                    { text: '禁用', value: 0 },
                ],
            },
        ]);

        return {
            tableColumn,
            tableData,
            handleAdd() {
                const newRow = {
                    id: Math.random().toString(),
                    name: '二蛋快跑别管我',
                    sex: 1,
                    height: 188,
                    status: 1,
                    age: 30,
                };
                tableData.value.unshift(newRow);
            },
            handleDelete() {
                tableData.value.splice(0, 1);
            },
            handleAutoLine() {
                tableColumn.value[3].showOverflowTooltip = !tableColumn.value[3].showOverflowTooltip;
            },
            templateString: `<template>
    <div class="example-box">
        <div style="margin-bottom: 10px;">
            <el-button @click="handleAdd">新增行</el-button>
            <el-button @click="handleDelete">删除行</el-button>
            <el-button @click="handleAutoLine">切换【照片】列的文本展示模式</el-button>
        </div>
        <sib-table :table-column="tableColumn" :table-data="tableData" />
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const tableData = ref(Array(10).fill().map((_, i) => ({
            id: i + 1,
            name: \`张三\${i + 1}号\`,
            sex: i % 2,
            height: 165 + i,
            status: i % 2,
            age: i + 10,
            avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        })));
        const tableColumn = ref([
            {
                // 非必传，当前列的表头名称
                label: '姓名',
                // 必传，当前列每一行数据展示值对应的code
                code: 'name',
                // 列的宽度，未配置则默认自适应
                width: 100,
                // 配置了 filters 将开启列筛选功能
                filters: [
                    { text: '想看张三1号', value: 'zs1' },
                    { text: '想看张三2号', value: 'zs2' },
                ],
                // 自定义筛选方法 filterMethod
                filterMethod(value, row, column) {
                    if (value === 'zs1') return row[column.property] === '张三1号';
                    if (value === 'zs2') return row[column.property] === '张三2号';
                    return true;
                },
            },
            {
                label: '性别',
                code: 'sex',
                // 非必传，该列的值支持使用 formatter 方法进行自定义；参数为: (row, config)
                formatter: (row) => ({ 1: '男', 0: '女' })[row.sex],
            },
            {
                label: '年龄',
                code: 'age',
                // 对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件;
                // 如果设置为 true，并且配置了 requestConfig，则自动启用调用接口的方式进行排序；
                // 如果设置为 true，但未配置 requestConfig，则使用前端静态排序的方式；
                sortable: true,
            },
            {
                label: '照片',
                code: 'avatar',
                // 当内容过长被隐藏时显示 tooltip； 组件内默认值: true
                showOverflowTooltip: true,
            },
            {
                label: '身高',
                code: 'height',
            },
            {
                label: '状态',
                code: 'status',
                // 格式化内容展示
                formatter: (row) => ({ 1: '启用', 0: '禁用' })[row.status],
                // 配置了 filters 将开启列筛选功能
                // 如果不配置 filterMethod，组件内会默认根据数据行内的 status 的值跟 filters 定义的 value 进行匹配过滤
                // 即 row.status === filters[n].value
                filters: [
                    { text: '启用', value: 1 },
                    { text: '禁用', value: 0 },
                ],
            },
        ]);

        return {
            tableColumn,
            tableData,
            handleAdd() {
                const newRow = {
                    id: Math.random().toString(),
                    name: '二蛋快跑别管我',
                    sex: 1,
                    height: 188,
                    status: 1,
                    age: 30,
                };
                tableData.value.unshift(newRow);
            },
            handleDelete() {
                tableData.value.splice(0, 1);
            },
            handleAutoLine() {
                tableColumn.value[3].showOverflowTooltip = !tableColumn.value[3].showOverflowTooltip;
            },
        };
    },
};
<\/script>

<style lang="scss">
.example-box .sib-table {
    height: 400px;
}
</style>`,
        };
    },
};
</script>
